<template>
    <div class="land">
        <div class="padding">
			<span class="back" @click="goBack">
				<img src="../../../static/img/arrow_left@3x.png" alt="">
			</span>
            <h1 class="title">找回密码</h1>
        </div>
        <p class="text">请您输入您的手机号，在获取验证码后，设置新的密码</p>
        <div class="content padding">
            <div class="mess">
                <input class="left" v-model="phoneNumber" type="text" @focus="phoneNumberInput" @blur="phoneNum">
                <span v-if="show" class="right" @click="getProving">获取验证码</span>
                <span v-if="!show" class="right time">{{count}}秒后可获取</span>
            </div>
            <div class="code">
                <input class="left" v-model="captchaNum" @focus="captchaNumInput" @blur="captcha" type="text">
            </div>
            <div class="pass">
                <input class="left" v-model="passWord" type="password" @focus="passWordInput" @blur="passwordVer"
                       placeholder="请输入密码">
            </div>
            <div class="pass">
                <input class="left" v-model="newPassword" type="password" @focus="newPassWordInput"
                       placeholder="请再次输入密码">
            </div>
        </div>
        <div class="send" @click="surSend">确认提交</div>
    </div>
</template>
<script>
    /* eslint-disable */
    import {mailNumber,getPassword} from "api/api"
    import axios from "axios"
    import {mapGetters} from "vuex"
    import {Toast} from "mint-ui"
    export default {
        data() {
            return {
                phoneNumber: "请输入手机号码",
                passWord: "",
                newPassword: "",
                captchaNum: "请输入短信验证码",
                show: true,
                timer: null,
				count:'60'
            };
        },
        computed: {
            ...mapGetters(["publicToken"])
        },
        created() {
            // if (this.publicToken === "") {
            //     this.$router.push("/loading")
            // }
        },
        methods: {
            // 正则
            phoneNum(){
                if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.phoneNumber)) {
                    if(this.phoneNumber==='') {
                        this.phoneNumber='请输入手机号码'
                        this.$createToast({ time:700, type:'warn', txt: '请输入正确手机号' }).show()
                    }
                }
            },
            passwordVer(){
                if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(this.passWord)) {
                    this.$createToast({ time:700, type:'warn', txt: '密码由数字和字母结合,不能小于8位',duration:500,position:'top'}).show()
                }
            },
            goBack() {
                this.$router.go(-1);
            },
            captcha() {
                if(this.captchaNum==='') {
                    this.captchaNum='请输入短信验证码'
                }
            },
            phoneNumberInput() {
                if (this.phoneNumber === "请输入手机号码") {
                    this.phoneNumber = ""
                }
            },
            // 输入密码的时候清空输入框中的默认的值
            passWordInput() {
                if (this.passWord === "请输入登录密码") {
                    this.passWord = ""
                }
            },
            newPassWordInput() {
                if (this.newPassWord === "请再次输入密码") {
                    this.newPassword = ""
                }
            },
            captchaNumInput() {
                if (this.captchaNum === "请输入短信验证码") {
                    this.captchaNum = ""
                }
            },
            surSend() {
                let _this=this
                if (this.newPassword === this.passWord) {
                    let phone = Number(this.phoneNumber);
                    let captcha = Number(this.captchaNum);
                    axios
                        .post(
                            getPassword +
                            this.phoneNumber +
                            "/" +
                            this.captchaNum +
                            "/password?pwd=" +
                            this.passWord +
                            "&access_token=" +
                            this.publicToken,
                            {
                                param: {
                                    fields: {
                                        phone: phone,
                                        captcha: captcha,
                                        pwd: this.passWord,
                                        device: "849ed1caf7a19b1",
                                        deviceInfo: "info"
                                    }
                                }
                            }
                        )
                        .then(res => {
                            if (res.data.code === 200) {
                                this.$createToast({ time:700, type:'warn', txt: '修改成功' }).show()
                                setTimeout(function () {
                                //   this.$router.push("./safe")
                                  _this.$router.push('/safe')
                                },700)
                            }
                            if (res.data.code === 400) {
                                this.$createToast({ time:700, type:'warn', txt: '输入不能为空' }).show()
                            }
                            if (res.data.code === 403) {
                                this.$createToast({ time:700, type:'warn', txt: '验证码错误' }).show()
                            }
                            console.log(res)
                        })
                        .catch(error => {
                            console.log(error)
                        })
                } else {
                    this.$createToast({ time:700, type:'warn', txt: '两次输入密码不一致' }).show()
                }
            },
            getProving() {
                if (this.publicToken === "") {
                    console.log("用户刷新造成的公共Token丢失，重定向至loading页面获取token")
                    this.$router.push("/loading")
                }
                let address = mailNumber + "/" + this.phoneNumber + "/verify"
                axios
                    .get(address, {
                        params: {
                            access_token: this.publicToken
                        }
                    })
                    .then(res => {
                        console.log(res)
                        if (res.data.code === 200) {
                            this.$createToast({ time:700, type:'warn', txt: '验证码已发送' }).show()
                        }
                        if (res.data.code === 500) {
                            this.$createToast({ time:700, type:'warn', txt: '验证码发送失败' }).show()
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
                if(!/^1[3|4|5|7|8][0-9]{9}$/.test(this.phoneNumber)){
                    this.$createToast({ time:700, type:'warn', txt: '请输入正确手机号' }).show()
                }else {
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT
                        this.show = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--
                            } else {
                                this.show = true
                                clearInterval(this.timer)
                                this.timer = null
                            }
                        }, 1000)
                    }
                    let address = mailNumber + '/' + this.phoneNumber + '/verify'
                    axios.get(address, {
                        params: {
                            access_token: this.publicToken
                        }
                    }).then((res) => {
                        if(res.data.code === 200){
                            this.$createToast({ time:700, type:'warn', txt: '验证码已发送' }).show()
                        }
                        if(res.data.code === 500){
                            this.$createToast({ time:700, type:'warn', txt: '验证码发送失败' }).show()
                        }
                    }).catch((error) => {
                    })
				}
            }
        }
    }
</script>
<style lang="stylus" scoped>
    input {
        outline: none;
    }

    .padding {
        padding: 0 1rem;
    }

    .land span.back {
        float: left;
        width: 0.6rem;
        height: 1rem;
        background-size: 0.5rem 1rem;
        margin-top: 1.5rem;
    }

    .land span.back img {
        width: 100%;
        height: 100%;
    }

    .text {
        background: #f4f4f4;
        padding: 1rem 2rem 1rem 1rem;
        text-align: left;
        line-height: 1.2rem;
    }

    .title {
        font-family: PingFang-SC-Medium;
        font-size: 1.2rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 4rem;
        letter-spacing: 0rem;
        color: #333333;
        text-align: center;
    }

    .content {
        margin-top: 2rem;
    }

    .mess {
        overflow: hidden;
        border-bottom: 1px solid #d1d1d1;
        padding: 1px 1px 0.5rem;
    }

    .mess .left {
        float: left;
        line-height: 2rem;
        width: 55%;
        font-family: PingFang-SC-Regular;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #333333;
        padding-left: 5px;
    }

    .mess .right {
        float: right;
        width: 40%;
        background-color: #333333;
        border-radius: 2rem;
        height: 2rem;
        background-color: #333333;
        border-radius: 2rem;
        font-family: PingFang-SC-Medium;
        font-size: 1rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 2rem;
        letter-spacing: 0rem;
        color: #ffffff;
    }

    .code, .pass, .surePass {
        overflow: hidden;
        padding: 1rem 0;
        border-bottom: 1px solid #d1d1d1;
    }

    .code .left {
        float: left;
        width: 65%;
        font-family: PingFang-SC-Regular;
        font-weight: normal;
        font-stretch: normal;
        line-height: 2rem;
        letter-spacing: 0rem;
        color: #333333;
        margin: 2px;
        padding-left: 5px;
    }

    .pass .left {
        float: left;
        width: 90%;
        font-family: PingFang-SC-Regular;
        font-weight: normal;
        font-stretch: normal;
        line-height: 2rem;
        letter-spacing: 0rem;
        color: #333333;
        margin: 2px;
        padding-left: 5px;
    }

    .surePass .left {
        float: left;
        width: 90%;
        font-family: PingFang-SC-Regular;
        font-weight: normal;
        font-stretch: normal;
        line-height: 2rem;
        letter-spacing: 0rem;
        color: #333333;
        margin: 2px;
        padding-left: 5px;
    }

    .send {
        width: 90%;
        margin: 0 auto;
        background: #333;
        height: 3rem;
        color: #fff;
        text-align: center;
        line-height: 3rem;
        margin-top: 9rem;
    }
</style>